<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .warn{
            display: block;
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" class="col-5">
        <fieldset>
            <legend>商品详情</legend>
            <p>
                <label for="id">编号:</label>
                <input class="form-control" type="text" name="id" id="id" v-model='prod.id'>
                
            </p>
            <p>
                <label for="name">名称:</label>
                <input class="form-control" type="text" name="name" id="name" v-model='prod.name'>
                <span v-bind:class="[{warn:!isValid},{hide:isValid}]">商品名称不能为空</span>
            </p>
            <p>
                <label for="price">价格:</label>
                <input class="form-control" type="text" name="price" id="price" v-model='prod.price'>
            </p>
            <p><input class="form-control btn btn-primary" type="button" value="保存" @click='add()'></p>
        </fieldset>
        <input type="text" class="form-control" name="" id="" placeholder="请输入查询关键字" v-model='searchKey'>
        <table class="table">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            <tbody v-for="prod in searchProdList">
                <tr>
                    <td>{{ prod.id }}</td>
                    <td>{{ prod.name }}</td>
                    <td>&yen;{{ prod.price | priceFormat}}</td>
                    <td><input class="form-control btn btn-danger" type="button" value="删除" v-on:click='del(prod)'/></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isValid:true,
                searchKey:'',
                prod: {
                    id: 0,
                    name: '',
                    price: 0
                },
                prodList: []
            },
            computed:{
                // 计算属性
                searchProdList:function(){
                    var that = this
                    return this.prodList.filter(function(item){
                        return item.name.indexOf(that.searchKey) != -1                           
                    })
                }
            },
            watch:{
                // 侦听属性
                prod:{
                    handler:function(k,v){
                        if(k.name === '')
                            this.isValid = false
                        else
                            this.isValid = true
                    },
                    deep:true
                }
            },
            filters:{
                // 过滤器
                priceFormat:function(p){
                    return parseFloat(p).toFixed(2) + '元'
                }
            },
            methods: {
                // 绑定方法
                add: function () {
                    this.prodList.push(this.prod)
                    //清空空文本框
                    this.prod = {
                        id: 0,
                        name: '',
                        price: 0
                    }
                },
                del:function(item){
                    var index = this.prodList.indexOf(item)
                    if(window.confirm("是否删除该商品"))
                        this.prodList.splice(index,1)
                }
            }
        })
    </script>
</body>

</html>